大家好，今天我們要來使用VideoPlayer，要使用到video_player plugin

因為這個plugin不能在iOS虛擬機運行，所以今天使用安卓系統測試
使用前要注意的時候事情，假如要用網路資源記得為app新增權限要求
/android/app/src/main/AndroidManifest.xml:
Android設定在AndroidManifest中新增這一行

<uses-permission android:name="android.permission.INTERNET"/>

使用的時候，用VideoPlayer、然後用VideoPlayerController控制
這邊我使用_controller.value.isPlaying的原因是，希望沒有播放的時候可以顯示劇照
用AspecRatio去框出影片及照片的比例為16:9

 Center(
          child: _controller.value.isPlaying
              ? AspectRatio(播放時顯示這個
                  aspectRatio: 16 / 9,
                  child: VideoPlayer(_controller),
                )
              : AspectRatio( //沒播放時顯示這個
                  aspectRatio: 16 / 9,
                  child: Container(
                    color: Colors.grey,
                    child: Image.asset("assets/guizhuanyuan2.jpeg",fit: BoxFit.cover,),
                  ),
                ),
        ),

控制影片播放暫停需要使用VideoPlayerController
在initState中指定檔案位置network、asset或file，初始化

 VideoPlayerController _controller;

  @override
  void initState() {
    // TODO: implement initState
    _controller = VideoPlayerController.asset('assets/gui_zhuang_yuan.mp4')
      ..initialize().then((_) {
        // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
        print('initialize success');
        setState(() {});
      });
    super.initState();
  }

我用Stack把播放按鍵疊在影片上方，用GestureDetector控制點擊輸入

 GestureDetector(
            onTap: () {
              setState(() {
                _controller.value.isPlaying
                    ? _controller.pause()
                    : _controller.play();
              });
            },
            child: Icon(
              _controller.value.isPlaying
                  ? Icons.pause
                  : Icons.play_circle_outline,
              size: 60.0,
            ))

以上就可以控制影片播放了，把每一個item放進ListView稍作調整就完成了
除了影片部分比較不一樣，每一個item排版主要是Text跟前幾篇似曾相識，
補充一點CircleAvatar被我用來畫keyword的一個個圓點

Padding(
          padding: const EdgeInsets.all(4.0),
          child: CircleAvatar(
            backgroundColor: Colors.white,
            radius: 2.0,
          ),

影片轉不出GIF，今日完成之效果如網址：https://i.imgur.com/bCtc6s8.mp4

GitHub連結： flutter-netflix-clone